<template>
  <div>
    <svg-icon v-if="!isFullScreen" icon-class="fullscreen" class="my-icon" @click="toggle" />
    <svg-icon v-else icon-class="exit-fullscreen" class="my-icon" @click="toggle" />
  </div>
</template>

<script>
// 安装指定版本4.2.1版本
import screenfull from 'screenfull'
export default {
  data() {
    return {
      isFullScreen: false
    }
  },
  methods: {
    toggle() {
      // console.log(screenfull.isEnabled)// 检测浏览器是否支持全屏 布尔值
      if (screenfull.isEnabled) {
        this.isFullScreen = !this.isFullScreen
        screenfull.toggle()
      } else {
        return this.$message.error('不好意思, 该浏览器不支持全屏')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-icon {
  font-size: 20px;
  fill: #fff;
  cursor: pointer;
}
</style>
